<template>
	<view>
		<view class="custom-navbar">
			<view class="navbar-back" @click="handleBack()">
				<image src="/arrow-left-s-line.png"></image>
			</view>
		</view>
		<view class="pic-container">
			<image src="/static/icons/u4231.png"></image>
		</view>
		<view class="container">
			<view class="flex-between">
				<text>{{ serveData?.name }}</text>
				<text>¥{{serveData?.price}}</text>
			</view>
			<view class="small">
				<text>所属机构：</text><text>翡翠郡社区服务站</text>
			</view>
			<view class="small">
				<text>所属团队：</text><text>李明明团队</text>
			</view>
			<view class="tag-container">
				<up-tag v-for="(tag, index) in serveData?.tagIds || []" :key="index" :text="tag.name" type="warning"
					plain plainFill borderColor="transparent" :color="getTagColor(index)" :autoBgColor="95"></up-tag>
			</view>
		</view>
		<view class="container">
			<view>
				服务对象
			</view>
			<view class="small">
				{{serveData?.client}}
			</view>
		</view>
		<view class="container">
			<view>
				服务介绍
			</view>
			<view class="small">
				{{serveData?.intro}}
			</view>
		</view>
		<view class="container">
			<view>
				服务项目
			</view>
			<view>
				<view class="service" v-for="item in serveData?.serviceItemIds" :key="item._id">
					<text>{{ item.name }}</text><text class="blue">{{ item.count }}次</text>
				</view>
			</view>
		</view>
		<view class="container">
			<view>
				服务周期
			</view>
			<view class="small">
				{{serveData?.period}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getServeDetailApi
	} from '../../../api/serve';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad((options) => {
		getServeDetail(options);
	})

	const handleBack = () => {
		uni.navigateBack()
	}
	const tagColors = [
		'#6ED1AA', // 绿色
		'#73A6FF', // 蓝色
		'#FF9966', // 橙色
		'#9966CC', // 紫色
		'#FF6666', // 红色
		'#FFCC66', // 黄色
	];

	// 根据索引获取循环颜色
	const getTagColor = (index) => {
		return tagColors[index % tagColors.length];
	};

	const serveData = ref()
	const getServeDetail = async (data) => {
		const res = await getServeDetailApi(data)
		if (res.code == 200) {
			console.log(res);
			serveData.value = res.data
			serveData.value.tagIds = res.data.tagIds
			serveData.value.serviceItemIds = res.data.serviceItemIds
		}
	}

	onLoad(() => {
		getServeDetail()
	})
</script>

<style lang="scss" scoped>
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 250rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		background-color: rgba(255, 255, 255, 0.0);
		z-index: 999;

		.navbar-back {
			width: 70rpx;
			height: 70rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.pic-container {
		margin-top: 88rpx;

		image {
			height: 600rpx;
			width: 100%;
		}
	}

	.container {
		padding: 32rpx 32rpx;
		font-size: 45rpx;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;


		text:last-child {
			color: #DB8275;

		}
	}

	.small {
		font-size: 30rpx;
		color: #ccc;
		margin-top: 30rpx;
	}

	.tag-container {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
		/* 调整标签间距 */
		margin-top: 20rpx;
	}

	.service {
		border-bottom: 1rpx solid #ddd;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;

		.blue {
			color: #5D92F2;
		}
	}
</style>